﻿
<style type="text/css">
    span.asc
    {
        color:Green;
    }
    span.desc
    {
        color:red;
    }
</style>
<h1>Cell formater</h1>

<div id="demoGrid">
        
</div>

<script language="javascript" type="text/javascript">
    var grid = new OOGrid("demoGrid");
    grid.Columns = BuildColumns();
    grid.PageSize = 30;
    grid.BodyHeight = 400;
    grid.AjaxOptions = new AjaxOptions("/demo/prices", "");
    grid.Initialize();

    function BuildColumns() {
        var columns = new Array();
        var id = new Column();
        id.MemberName = "ID";
        id.Width = 50;
        columns.push(id);

        var name = new Column();
        name.MemberName = "ProductName";
        name.HeaderHtml = "Product Name";
        name.Width = "auto";
        columns.push(name);

        var price = new Column();
        price.MemberName = "Price";
        price.Width = 120;
        price.MemberDataType = DataType.Number;
        columns.push(price);

        var difference = new Column();
        difference.MemberName = "Difference";
        difference.HeaderHtml = "<span style='color:red'>Difference</span>";
        difference.MemberDataType = DataType.Number;
        difference.Width = 250;
        difference.CellFormater = function (value) {
            var css = value * 1 > 0 ? "asc" : "desc";
            return "<span class='" + css + "'>" + value + "</span>";
        }
        columns.push(difference);

        return columns;
    }
</script>